<template>
  <div class="container">
    <el-card>
      <el-row type="flex" justify="space-between">
        <el-col>
          <el-button type="primary" size="small" @click="addCustomerFn">添加客户</el-button>
        </el-col>
        <el-col :span="20">
          <el-row type="flex">
            <el-select v-model="agentList.id" placeholder="请选择" @change="selectChange">
              <el-option
                v-for="item in agentList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <el-input v-model="keyword" placeholder="请输入关键词" />
            <el-button @click="search">筛选</el-button>
          </el-row>
        </el-col>
      </el-row>
      <!-- 表格 -->
      <el-table
        :data="listData"
        border
        height="350px"
        style="width: 100%"
      ><el-table-column
         label="图片"
         align="center"
         width="140px"
       >
         <template v-slot="scope">
           <img :src="scope.row.image" alt="" class="avatar">
         </template>
       </el-table-column>
        <el-table-column
          prop="name"
          width="100px"
          align="center"
          label="名称"
        />
        <el-table-column
          prop="email"
          align="center"
          label="邮箱"
        />
        <el-table-column
          prop="phone"
          align="center"
          label="电话"
        />
        <el-table-column
          prop="agent.name"
          align="center"
          label="经纪"
        />
        <el-table-column
          prop="wechat"
          width="100px"
          align="center"
          label="微信"
        />
        <el-table-column
          prop="desc"
          align="center"
          label="介绍"
        />
        <el-table-column
          label="操作"
          align="center"
          width="200px"
        >
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="editFn(row.id)">编辑</el-button>
            <el-button type="danger" size="mini" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        background
        :page-size="pageSize"
        @current-change="changeSize"
      />
    </el-card>
    <!-- 对话框 -->
    <AddCustomer ref="add" :dialog-visible.sync="dialogVisible" @reloadNum="getClientNum" @reloadPage="getClientList((index-1)*pageSize)" />
  </div>
</template>

<script>
import { getClientList, delClient, getClientNum } from '@/api/client'
import { getAgentList } from '@/api/agent'
import AddCustomer from './component/add-customer.vue'
export default {
  components: {
    AddCustomer
  },
  data() {
    return {
      listData: [], // 客户列表
      dialogVisible: false,
      agentList: [],
      total: 0,
      pageSize: 5, // 每页显示的数量,
      index: 1,
      keyword: ''// 关键词
    }
  },
  async created() {
    // 获取用户列表
    this.getClientList(0)
    // 获取用户数量
    this.getClientNum()
    const res = await getAgentList()
    this.agentList = res.data
    console.log('agentList', this.agentList)
  },
  methods: {
    // 渲染用户列表，start 开始的页面
    async getClientList(start) {
      const res = await getClientList({ _limit: this.pageSize, _start: start })
      this.listData = res.data
      console.log('客户列表', this.listData)
    },
    // 获取用户数量
    async getClientNum() {
      const res = await getClientNum()
      this.total = res.data
      console.log('total', this.total)
    },
    // 点击新增用户
    addCustomerFn() {
      this.dialogVisible = true
    },
    // 编辑功能
    async editFn(id) {
      // 获取点击的数据
      console.log(id)
      // 调用子组件的方法
      await this.$refs.add.getClientId(id)
      this.dialogVisible = true
    },
    // 删除功能
    async delFn(id) {
    // 二次弹窗确认
      await this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
      // 发送请求
      await delClient(id)
      // 提示
      this.$message.success('删除成功')
      // 重新渲染
      this.getClientNum()
      if (this.listData.length === 1 && this.index !== 1) {
        this.index--
      }
      this.getClientList((this.index - 1) * this.pageSize)
    },
    // 分页功能
    changeSize(index) {
      this.index = index
      console.log(index)
      this.getClientList((index - 1) * 3)
    },
    // 下拉框选择
    selectChange(id) {
      this.agentId = id
    },
    // 搜索功能
    async search() {
      const pageConfig = { _limit: this.pageSize, name_contains: this.keyword, agent: this.agentId }
      // 获取列表
      const res = await getClientList(pageConfig)
      // 获取数量
      const res1 = await getClientNum({ name_contains: this.keyword, agent: this.agentId })
      this.total = res1.data
      this.listData = res.data
    }
  }
}
</script>

<style lang="scss" scoped>
.container{
  padding: 20px;
}
.el-table{
  margin-top: 20px;
}
.avatar{
  width: 100px;
  height: 100px;
  object-fit: cover;
  margin: 0 10px;
}
  .el-pagination{
   text-align: center;
  }
</style>
